<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="container">
        <header>
            <h1>蜗牛学院学生管理系统</h1>
        </header>
        <main>
            <aside>
                <dl>
                    <dt>学生管理</dt>
                    <dd><a href="./studentsAdd.html">新增学生</a></dd>
                    <dd><a href="./studentsList.html">学生列表</a></dd>
                </dl>
                <dl>
                    <dt class="active">班级管理</dt>
                    <dd><a href="./classesAdd.html">新增班级</a></dd>
                    <dd><a href="./classesList.html">班级列表</a></dd>
                </dl>
                <dl>
                    <dt>班主任管理</dt>
                    <dd><a href="./directorsAdd.html">新增班主任</a></dd>
                    <dd><a href="./directorsAdd.html">班主任列表</a></dd>
                </dl>
                <dl>
                    <dt>教师管理</dt>
                    <dd><a href="./teachersAdd.html">新增教师</a></dd>
                    <dd><a href="./teachersList.html">教师列表</a></dd>
                </dl>
                <dl>
                    <dt>专业管理</dt>
                    <dd><a href="./professionAdd.html">新增专业</a></dd>
                    <dd><a href="./professionList.html">专业列表</a></dd>
                </dl>
                <dl>
                    <dt>排课管理</dt>
                    <dd><a href="#">新增排课</a></dd>
                    <dd><a href="#">排课列表</a></dd>
                </dl>
            </aside>
            <section>
                <div class="section-content" id="classesList">
                    <h2>班级信息</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>班级数据</h3>
                            <div>
                                <div class="content-row">
                                    <div class="search-frame">
                                        <select style="width: 60px;">
                                            <option value="name">姓名</option>
                                            <option value="age">年龄</option>
                                            <option value="gender">性别</option>
                                        </select>
                                        <input type="text">
                                    </div>
                                </div>

                                <table>
                                    <thead>
                                        <tr>
                                            <th>班级编号</th>
                                            <th>所属专业</th>
                                            <th>班级名称</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="classesTb"></tbody>
                                </table>
                                <div class="content-row" style="display: flex;justify-content: space-between;">
                                    <p>每页
                                        <select id="pageSize">
                                            <option value="3">3</option>
                                            <option value="5">5</option>
                                            <option value="7">7</option>
                                            <option value="10">10</option>
                                        </select> 条数据。显示第 1 条到第 <span id="branches">3</span>条数据，共计 <span id="sum"></span>条数据。
                                    </p>
                                    <span>第 <strong id="currentPage">1</strong>/<strong id="pages">1</strong> 页</span>
                                </div>
                                <div class="content-row" style="text-align: center;">
                                    <button id="homePage">首页</button>
                                    <button id="prevPage">上一页</button>
                                    <button id="nextPage">下一页</button>
                                    <button id="lastPage">尾页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
</body>

</html>